<template>
	<view>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" :showCancelButton="true" ref="uModal"
			:closeOnClickOverlay="true" width="600rpx" @close="show=false" :asyncClose="true" confirmText="立即下单"
			cancelText="去这里" style="z-index: 1;">
			<uni-section :title="shopinfo.storeName" type="line" style="width:100%">
				<view class="" style="margin-top:15rpx;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="7">
							<view class="demo-layout bg-purple-light">
								<image :src="shopinfo.storeLogo" style="width:200rpx;height:200rpx;"></image>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple">
								<p style="font-weight: bold;">{{shopinfo.shopLocation}}</p>
								<br>
								<p>{{shopinfo.address}}</p>
								<br>
							<!-- 	<p>{{shopinfo.storeLatitude}}</p> -->
							</view>
						</u-col>
					</u-row>
		
		
				</view>
			</uni-section>
		</u-modal>
		<view class="top" style="z-index: -1;" >
			<!-- <view class="" style="width: 100%;position: absolute;left: 20rpx;top:20rpx;z-index: 1;" @click="back()">
				<image src="/static/back.png" mode="" style="width: 50rpx;height:50rpx"></image>
			</view> -->
			<map id="my_test_map" style="width: 750rpx; height: 540upx;" :include-points='get_address'
				@markertap="check_market" :circles="circles" :scale="scale" @regionchange="regionchange"
				:markers='markers' :latitude="center_lat" :longitude="center_lng">
			</map>
		</view>
		
		<view class="bottom"  style="z-index: 2;" >
			<uni-section :title="'附近共'+this.shopnum+'家门店'" type="line">
				<view class="" v-for="item in shoplist">
					<uni-card :title="item.storeName" :sub-title="item.address" extra=" "
						:thumbnail="item.storeLogo">
						<uni-tag :text="item.state" type="success"></uni-tag>
					</uni-card>
					<view class="" style="width: 80%;margin:0 auto">
						<button type="primary" @click="goShop(item)">去这里</button>
					</view>
				</view>
			</uni-section>
			<p style="text-align: center;font-size: 14px;color: #CCCCCC;margin-top: 10rpx;">更多门店拓展中~</p>
			
		</view>
	</view>
	</view>
</template>

<script>
		import request from '../../request.js'
	export default {
		data() {
			return {
				/* 地图参数 */
				id: 'mymap',
				center_lat: "",
				center_lng: "",
				markers: [],
				scale: 15,
				get_address: [],
				circles: [],

				/* 弹窗状态 */
				show: false,

				/* 用户id */
				userid: 0,

				/* 门店列表 */
				shoplist: [],
				/* 门店数量 */
				shopnum: 0,
				/* 门店详细信息 */
				shopinfo: {},
				/* 店铺id */
				shopid: 0,
			}
		},
		onShow() {
			/* 获取自身经纬度 */
			this.getJW()
			/* 获取用户id */
			this.getSession()
		},
		methods: {
			openMap(lon, lat) {
				console.log("获取经纬度ssssfff", lon, lat);
				//打开地图，并将门店位置传入
				uni.getLocation({
					success: res => {
						// res.latitude=lat;
						// res.longitude=lon;
						console.log('location success', parseFloat(lat), parseFloat(lon))
						uni.openLocation({
							latitude: parseFloat(lat),
							longitude: parseFloat(lon),
							scale: 18
						})
					}

				})
			},

			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			/*选择店铺 */
			goShop(item) {
				this.openMap(item.storeLongitude, item.storeLatitude)
				console.log(item)

			},
			/* 获取session 用户id */
			getSession() {
				this.userid = uni.getStorageSync("userid")
			},
			/* 弹窗方法1 */
			/*  立即下单*/
			confirm() {
				// for (var i = 0; i < this.shoplist.length; i++) {
				// 	if (this.shoplist[i].id == this.shopid) {
				// 		this.openMap(this.shoplist[i].storeLongitude, this.shoplist[i].storeLatitude)
				// 		// uni.navigateTo({
				// 		// 	url: '../zgd/stores_sub?item=' + JSON.stringify(this.shoplist[i]),
				// 		// })
				// 	}
				// }

				uni.navigateTo({
					url:'./porder?storeId=' + this.shopinfo.storeId
                     })
				this.show = false;
			},
			/* 去这里 */
			cancel() {
				this.openMap(this.shopinfo.storeLongitude,this.shopinfo.storeLatitude)
				// if (this.userid != 0) {
				// 	uni.navigateTo({
				// 		url: '/pages/zgd/message/chat?conversationID=C2C' + 5
				// 	})
				// } else {
				// 	uni.showToast({
				// 		title: '请先去登录',
				// 		icon: 'error'
				// 	})
				// }

				this.show = false
			},
			/* 获取经纬度 ，标记地图*/
			getJW() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log(res)
						this.center_lng = res.longitude
						this.center_lat = res.latitude
						this.change_markers()

					}
				})

			},
			/* 获取用户，店铺的经纬度 */
			change_markers() {
				//生成标记点
				var begin_markers = [{
					id: this.userid,
					latitude: this.center_lat,
					longitude: this.center_lng,
					iconPath: '../../static/mapshopyuan.png',
					width: 50,
					height: 50,
					title: '标注点A',
					callout: [{
						content: "tes****123456t",
						color: '#333',
						bgColor: "#fff",
						fontSize: '66',
						padding: '20upx',
						display: 'ALWAYS'
					}]
				}]
				var now_address = [{
					id: this.userid,
					latitude: this.center_lat,
					longitude: this.center_lng,
					iconPath: "../../../static/mapshopyuan.png",
					width: 50,
					height: 50
				}]
				request({
					url: "xkuser/recyclingorder/getallshop",
					data: {
						longitu: this.center_lng,
						latitu: this.center_lat
					},
					method: 'GET',
					success: (res) => {
						this.shoplist = res.data.data.shops
						this.shopnum = this.shoplist.length
						for (var i = 0; i < res.data.data.shops.length; i++) {
							var a = {
								id: "shop-" + res.data.data.shops[i].storeId,
								latitude: res.data.data.shops[i].storeLatitude,
								longitude: res.data.data.shops[i].storeLongitude,
								iconPath: "../../static/img/bgmoney.png",
								width: 50,
								height: 50,
							}
							begin_markers.push(a)

						}
						console.log("开始执行地图标注");
						console.log(begin_markers)
						
						//获取地图
						this.markers = now_address.concat(begin_markers);
						//缩放视野以包含所有给定的坐标点
						this.get_address = [{
							latitude: this.center_lat,
							longitude: this.center_lng,
						}]

					}
				})

				//
				//this.$forceUpdate();
			},
			// 拖拽地图1
			regionchange(e) {
				console.log(e);
				var _that = this;
				_that.mainmap = uni.createMapContext('my_test_map', this);
				_that.mainmap.getCenterLocation({
					success(res) {
						var lat = res.latitude
						var lng = res.longitude
						//重设标记点
						_that.mainmap.translateMarker({
							markerId: 'begin',
							destination: {
								latitude: lat,
								longitude: lng
							},
							duration: 350,
							animationEnd() {
								console.log('设置');
							}
						})
					}
				})

			},
			//点击标记,查询门店
			check_market(e) {
				if (e.detail.markerId != this.userid) {
					this.show = true;
					console.log(e.detail);
					
					request({
						url: "xkuser/recyclingorder/findshop",
						data: {
							id: e.detail.markerId
						},
						method: 'GET',
						success: (res) => {
							this.shopinfo = res.data.data.shop
							this.shopid = res.data.data.shop.storeId
							console.log("详细：" + res.data.data.shop.id)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 50%;

	}

	.bottom {
		width: 100%;
		height: 50%;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		border-radius: 20rpx;
	}

	.rect {
		width: 80%;
		height: 30%;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
